<template>
	<div class="device-list">
		<div class="device-list-container flex-container">


			<div class="device-list-table">

				<el-table :data="userList" border>

					<el-table-column label="ID" prop="id" width="60"></el-table-column>
					<el-table-column label="姓名" prop="name" min-width="80"></el-table-column>
					<el-table-column label="类型">
						<template slot-scope="scope">
							{{scope.row.target_type | trackTargetType}}
						</template>
					</el-table-column>
					<el-table-column label="加入时间">
						<template slot-scope="scope">
							{{scope.row.create_time | timeFormat}}
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="200">
						<template slot-scope="scope">
							<el-button size="mini" type="primary outline"
									   v-if="scope.row.target_type == 2"
									   @click="toGoodsSharingPage(scope.row)">
								分成配置
							</el-button>
							<el-button size="mini" type="danger outline"
									   @click="handleTrackRemove(scope.row)">
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="flex-footer h-80">
				<div class="flex-footer-content">
					<el-row>
						<el-col :span="8" class="pt-6">
							&nbsp;
							<el-button type="success" @click="handleAddTrack()">添加下级经销商</el-button>
						</el-col>
						<el-col :span="16" class="text-right" v-if="total > 0">
							<el-pagination
									@current-change="pageChange"
									:current-page="currentPage"
									:page-size="pageSize"
									layout="total, prev, pager, next, jumper"
									:total="total">
							</el-pagination>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>

		<!--编辑弹窗-->
		<el-dialog title="医生分配" custom-class="edit-dialog" :visible.sync="editModalVisible"
				   @close="handleModalClose">
			<el-form :label-position="'left'" label-width="110px" ref="userForm" :model="userForm">
				<el-form-item label="医院">
					<el-select v-model="userForm.sp" filterable placeholder="请选择" @change="handleSpChange()">
						<el-option
								v-for="item in hospitalList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="医生">
					<el-select v-model="userForm.doctorId" filterable placeholder="请选择">
						<el-option
								v-for="item in doctorList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="saveUser('userForm')">确认</el-button>
			</div>
		</el-dialog>

		<!--编辑弹窗-->
		<el-dialog title="添加下级经销商" custom-class="edit-dialog" :visible.sync="addTrackModalVisible"
				   @close="handleModalClose">
			<el-form :label-position="'left'" label-width="110px" ref="trackForm" :model="trackForm">
				<el-form-item label="名称">
					<el-input v-model="trackForm.name" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="trackForm.username" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="trackForm.password" placeholder=""></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="saveTrack('trackForm')">确认</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script type="text/ecmascript-6">

	import Core from 'core/core'

	export default {
		data() {
			return {
				editModalVisible: false,
				addTrackModalVisible: false,
				userForm: {
					sp: "",
					doctorId: "",
					userId: 0
				},
				trackForm: {
					name: "",
					username: "",
					password: ""
				},
				userList: [],
				doctorList: [],
				hospitalList: [],

				// 分页配置
				currentPage: 1,
				total: 0,
				pageSize: 20,
			}
		},
		mounted: function () {
			this._userList()
		},

		methods: {
			_userList() {
				Core.Api.Dealer.trackList(this.currentPage)
					.then(res => {
						this.userList = res.list
						this.total = res.count
					})
					.catch(err => {
					})
			},

			pageChange(val) {
				this.currentPage = val
				this._userList()
			},


			showAssignModal(user) {
				this.userForm.userId = user.id
				if (user.user_track) {
					this.userForm.sp = user.user_track.hospital_id
					this.userForm.doctorId = user.user_track.doctor_id
				}
				this.editModalVisible = true
			},

			handleModalClose() {
				this.userForm = {
					doctorId: "",
					userId: 0
				}

				this.trackForm = {
					name: "",
					username: "",
					password: ""
				}
			},

			handleSpChange() {
				this._doctorList()
			},

			handleTrackRemove(item) {
				this.$confirm('确认移除该医生?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					return Core.Api.Dealer.trackRemove(item.id)
				})
					.then(res => {
						this._userList()
					})
					.catch(() => {

					})
			},

			handleAddTrack() {
				this.addTrackModalVisible = true
			},

			saveTrack(formName) {
				this.$refs[formName].validate(valid => {
					if (!valid) return false

					Core.Api.Dealer.trackInsert(
						this.trackForm.name,
						this.trackForm.username,
						this.trackForm.password
					).then(res => {
						this.$message.success("新增成功")
						this.addTrackModalVisible = false
						this._userList()
					})
				})
			},

			toGoodsSharingPage(item) {
				this.$router.push('/user/goods-sharing?doctor_id=' + item.target_id)
			}

		}
	}
</script>

<style scoped lang="scss">
	.device-list {
		height: 100%;
		.device-list-container {
			height: 100%;
			.search-row {
				margin: 0;
				padding: 15px 30px;
				background: #fff;
				.el-form--inline .el-form-item {
					margin-bottom: 0;
				}
				.el-form-item__label {
					padding-right: 10px;
					font-size: 12px;
				}
				.el-form-item__content {
					.el-input {
						width: 175px;
					}
				}
			}

			.device-list-table {
				padding: 20px 0;
				background: #ffffff;
				position: relative;
				flex: 1;
				overflow: auto;
				.all-select-holder {
					line-height: 30px;
					position: absolute;
					left: 10px;
					z-index: 10;
				}
			}
			.flex-footer {
				border-top: 1px solid #E0E7EF;
			}
			.flex-footer.h-80 {
				height: 80px;
			}

		}

		a.success {
			display: inline-block;
			color: #fff;
			background-color: #03CC75;
			border-color: #03CC75;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			-webkit-appearance: none;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			padding: 7px 16px;
			font-size: 12px;
			border-radius: 4px;
			margin: 0 10px;
		}

		.upload-device {
			display: inline-block;
		}
	}
</style>
